import { Form, FormInstance, Input, Modal, Spin, message } from "antd";
import { PropsTypes, shopDataSourceFace } from "./type";
import { useEffect, useState } from "react";
import React from "react";
import { ceateShop, upDataShop } from "@/api/shop"
import { cloneDeep } from "lodash";
const Model: React.FC<PropsTypes> = (props) => {
    const d: shopDataSourceFace = {
        shopName: "",     // 店铺名称
        shopAddress: "",       // 店铺地址
        shopPictureKey: "",  // 店铺图片
        shopInfo: "",    // 店铺介绍
        uuid: "",
    }
    const [loading, setLoading] = useState(false)
    const [state, setState] = useState<shopDataSourceFace>(d)
    const formRef = React.useRef<FormInstance>(null);
    const handleOk = async () => {
        const validata: shopDataSourceFace = await formRef?.current?.validateFields()
        if (validata) {
            setLoading(true)
            if (props.upData?.uuid) {
                const data = { ...cloneDeep(props.upData), ...validata }
                upDataShop([data]).then(() => {
                    message.success("修改成功")
                }).catch(() => {
                    message.error("修改失败")
                }).finally(() => {
                    close(true)
                    setLoading(false)
                })


            } else {
                await ceateShop(validata)
                    .then(() => {
                        message.success("添加成功")
                    }).catch(() => {
                        message.error("添加失败")
                    }).finally(() => {
                        close(true)
                        setLoading(false)
                    })
            }


        }

    }
    const handleCancel = () => {
        close(false)
    }
    const close = (loadList: boolean) => {
        props.changeShow(false, loadList)
        setState({
            shopName: "",     // 店铺名称
            shopAddress: "",       // 店铺地址
            shopPictureKey: "",  // 店铺图片
            shopInfo: "",    // 店铺介绍
            uuid: "",
        })
    }
    useEffect(() => {
        if (props.upData) {
            formRef?.current?.setFieldsValue({
                ...props.upData
            })
        }

    }, [props.upData])
    return (
        <Modal title="上传店铺" open={props.show} onOk={handleOk} onCancel={handleCancel}>
            <Spin spinning={loading}>
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    initialValues={{ remember: true }}
                    autoComplete="off"
                    ref={formRef}
                >
                    <Form.Item<shopDataSourceFace>
                        label="店铺名称"
                        name="shopName"
                        rules={[{ max: 12 }, { required: true, message: '请输入店铺名称' }]}
                    >
                        <Input value={d.shopName} />
                    </Form.Item>
                    <Form.Item<shopDataSourceFace>
                        label="店铺地址"
                        name="shopAddress"
                        rules={[{ max: 12 }, { required: true, message: '请输入店铺地址' }]}
                    >
                        <Input value={d.shopAddress} />
                    </Form.Item>
                    <Form.Item<shopDataSourceFace>
                        label="店铺图片"
                        name="shopPictureKey"
                        rules={[{ max: 12 }, { required: true, message: '请选择店铺图片' }]}
                    >
                        <Input value={d.shopPictureKey} />
                    </Form.Item>
                    <Form.Item<shopDataSourceFace>
                        label="店铺简介"
                        name="shopInfo"
                        rules={[{ max: 12 }, { required: true, message: '请输入店铺简介' }]}
                    >
                        <Input value={d.shopInfo} />
                    </Form.Item>
                </Form>
            </Spin>

        </Modal>
    )
}
export default Model